<template>
    <div class="home-nav">
        <nav>
            <router-link to='/home/jx' :class="{ active: isActive!='1'&&isActive!='2' }">精选</router-link>
            <router-link to='/home/dt' :class="{ active: isActive=='1' }">动态</router-link>
            <router-link to='/home/pd' :class="{ active: isActive=='2' }">频道</router-link>
        </nav>
    </div>
</template>

<script>
    export default {
        props: ['isActive']
    }
</script>

<style scoped>

    nav {
        display: flex;
        justify-content: space-around;
    }
    nav a {
        flex:1;
        line-height: 44px;
        font-size: 14px;
        color: #333;
    }
    nav a.active {
        position: relative;
        color: #f44;
    }
    nav a.active:after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #f44;
    }
        
</style>